<template>
    <el-row>
        <div class="infinite-list-wrapper" style="overflow:auto">
            <ul
                class="list"
                v-loading="loading"
                element-loading-text="加载更新中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                v-infinite-scroll="loadmore"
                :infinite-scroll-disabled="disabled">
                <el-col :span="8" v-for="(item,i) in newList" :key="i" class="">
                    <router-link :to="{name:'gooddetail',params:{goodId:item._id}}">
                        <el-card class="box-card list-item">
                            <img :src="item.img" alt="">
                            <p>{{item.name}}--{{item.price}} -- {{item.type.text}} </p>
                        </el-card>  
                    </router-link>
                </el-col>
            </ul>
            <p v-if="loading" >加载中...</p>
            <p v-if="noMore"  >没有更多了</p>
        </div>
    </el-row>
</template>

<script>
export default {
    props:['typeobj','goods'],
    data(){
        return {
            list:[],
            count: 6,
            loading:false,
        }
    },
    computed:{
        noMore () {
            return this.count >= this.list.length;
        },
        disabled () {
            return this.loading || this.noMore
        },
        newList(){
            return this.list.slice(0,this.count);
        }
    },
    methods:{
        loadmore(){
            this.loading = true;
             setTimeout(() => {
                this.count += 3;
                this.loading = false
            }, 1200)
        }
    },
    mounted(){
        // this.list 
        this.list = this.goods.filter(item=>item.type.value == this.typeobj.value)
    }
}
</script>

<style lang="scss" scoped>
.list-item{
    margin:10px 5px;
    img{
        width:100%;
        height:240px;
    }
    p{
        width:100%;
        height:60px;
        line-height: 20px;
        margin-top:10px;
        color:darkorange;
    }
}
.ptips{
    width:100%;
    text-align: center;
}
</style>